import React, { Component, Suspense, ReactNode, lazy } from 'react';
import { Col, Row, Select } from 'antd';
import { withRouter } from 'react-router-dom';
import { connect } from 'dva';

import { STATISTICS_RANGE, SUCCESS_CODE, DATA_DISPLAY_DATA } from './data';
import styles from './style.less';
import { getBasicItemData } from './util';

const DataDisplay = lazy(() => import('./components/dataDisplay'));
const DisplayChart = lazy(() => import('./components/displayChart'));

interface StateType {
  [propName: string]: any;
}

interface PropType {
  [propName: string]: any;
}

const { Option } = Select;

class RealTime extends Component<PropType, StateType> {
  public state = {
    generalStatisticsRange: 0,
    itemData: {},
    activeItem: DATA_DISPLAY_DATA[0].key,
  };

  componentDidMount() {
    const { activeItem } = this.state;
    this.getBasicEffect();
    this.getItemData(activeItem);
  }

  // 取得实时统计-基础数据
  getBasicEffect = () => {
    const { dispatch } = this.props;
    const { generalStatisticsRange } = this.state;

    dispatch({
      type: 'statistics/getBasicEffect',
      payload: { isFake: generalStatisticsRange },
    });
  };

  handleSelectChange = (value: number) => {
    this.setState({ generalStatisticsRange: value }, () => {
      this.getBasicEffect();
      const { activeItem } = this.state;
      this.getItemData(activeItem);
    });
  };

  // 获取单个数据
  getItemData = (value: string) => {
    this.getBasicEffect();
    this.setState({ activeItem: value }, () => {
      const getItemData = getBasicItemData(value);
      if (!getItemData) {
        this.setState({ itemData: {} });
        return;
      }
      getItemData({ isFake: this.state.generalStatisticsRange }).then(
        (res: { code: number; data: any }) => {
          if (res) {
            const { code, data } = res;
            if (code === SUCCESS_CODE) {
              this.setState({ itemData: data });
            }
          }
        },
      );
    });
  };

  changeActiveItem = (val: string) => {
    this.setState({ activeItem: val });
  };

  render(): ReactNode {
    const { basic } = this.props.statistics;
    const { itemData } = this.state;

    return (
      <div>
        <Row>
          <Col span={3}>
            <span className={styles.title}>今日数据概况</span>
          </Col>
          <Col span={21}>
            <Select
              defaultValue={this.state.generalStatisticsRange}
              style={{ width: 120 }}
              onChange={this.handleSelectChange}
            >
              {STATISTICS_RANGE.map(item => (
                <Option value={item.value} key={item.value}>
                  {item.title}
                </Option>
              ))}
            </Select>
          </Col>
        </Row>
        <Suspense fallback={null}>
          <DataDisplay data={basic} itemClick={this.getItemData} change={this.changeActiveItem} />
        </Suspense>
        <Suspense fallback={null}>
          <DisplayChart data={itemData} />
        </Suspense>
      </div>
    );
  }
}

export default withRouter(
  connect(({ statistics }: { statistics: any }) => ({
    statistics,
  }))(RealTime),
);
